// mixins就是函数 把他理解成js中的函数就可以了
// 它包含了css的封装 使用时可直接调用或者传递参数生成对应的css

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.box1 {
  .flex();
}

.box2 {
  .flex-col();
}

// mixins 中存在重复声明时 并不会直接覆盖代码 而是产生两条或者多条相同的css语句

.box {
  .flex();
  display: block;
}

// 合并

.mixin() {
  box-shadow+: inset 0 0 10px #444;
}

.box2 {
  .mixin();
  // 将相同的属性的值进行合并 以“,”分隔
  // 需要合并的属性 需要在属性名后添加“+”的方式定义
  // + 以“,”来分隔合并
  // +_ 以“ ”空格来合并
  // 定义的分隔字符以最新定义的为准
  box-shadow+: 0 0 5px red; // box-shadow: inset 0 0 10px #444, 0 0 5px red;
}
